<template>
  <view class="home">
    <home-banner
      :banners="banners"
      @bannerItemClick="handleBannerItemClick"
    ></home-banner>
    <home-recommend :recommends="recommends"></home-recommend>
    <tab-control
      :titles="['流行', '新款', '精选']"
      @tab-click="handleTabClick"
    ></tab-control>
    <uni-grid :column="2" :square="false" :showBorder="false">
      <template v-for="item in goodsList[currenType].list" :key="item.iid">
        <uni-grid-item class="grid">
          <gird-item :item="item" @itemClick="handleItemClick(item)" />
        </uni-grid-item>
      </template>
    </uni-grid>
  </view>
</template>

<script setup>
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { useHomeStore } from '../../store/home'
import { storeToRefs } from 'pinia'
import HomeBanner from './c-cpns/home-banner/HomeBanner.vue'
import HomeRecommend from './c-cpns/home-recommend/HomeRecommend.vue'
import tabControl from './c-cpns/tab-control/tab-control.vue'
import uniGrid from '@/components/uni-grid/components/uni-grid/uni-grid.vue'
import girdItem from './c-cpns/grid-item/grid-item.vue'
import { types } from '@/store/home'
const homeStore = useHomeStore()
const { banners, recommends, goodsList, currenType } = storeToRefs(homeStore)
onLoad(() => {
  homeStore.fetchHomeMultidata()
  homeStore.fetchHomeData('pop', 1)
  homeStore.fetchHomeData('new', 1)
  homeStore.fetchHomeData('sell', 1)
})
function handleBannerItemClick(link) {
  setTimeout(() => {
    uni.navigateTo({
      url: '/pages/webView/webView?link=' + link
    })
  }, 0)
  // console.log(url)
}
// tab-control的点击事件
function handleTabClick(index) {
  console.log('handleTabClick', index)
  homeStore.setCurrentType(types[index], 1)
  console.log('currenType', currenType.value)
}
// console.log(currenType.value)
// console.log(goodsList.value[currenType.value].page)
// 监听页面滚动到底部
// console.log(
//   'goodsList[currenType].list[0]',
//   goodsList.value[currenType.value].list
// )

// 监听是都滚动到了底部
onReachBottom(() => {
  let newPage = goodsList.value[currenType.value].page + 1
  homeStore.fetchHomeData(currenType.value, newPage)
  // console.log(newPage)
})

// grid-view-item 的点击事件（会跳转到详情页面）
function handleItemClick(item) {
  console.log('handleItemClick', item.iid)
  setTimeout(() => {
    uni.navigateTo({
      url: '/pages/detail/detail?iid=' + item.iid
    })
  }, 0)
}
console.log('goodList', goodsList.value)
</script>

<style></style>
